<template>
  <div class="setting-view">
    <div class="radio-wrap">
      <div class="title"
        >支出单是否开启审批
        <a-tooltip content="关闭后，申请的支出单将无需审批">
          <icon-question-circle style="font-size: 16px; color: #4e5969" />
        </a-tooltip>
      </div>
      <a-radio-group v-model="form.ifOpen">
        <a-radio :value="1">开启</a-radio>
        <a-radio :value="0">关闭</a-radio>
      </a-radio-group>
    </div>

    <div class="form-wrap" v-if="form.ifOpen === 1">
      <a-timeline>
        <a-timeline-item v-for="(item, index) in form.flowList" :key="index">
          <div class="step-wrap">{{ NUM_TEXT[index] }}级 | 审批人的岗位 <span class="required"> *</span></div>
          <div class="select-wrap">
            <sysdict-select
              :error="item.post == undefined"
              v-model="item.post"
              code="staff_post"
              popupContainer="body"
              style="width: 240px; margin-right: 2px"
            />
            <!-- 按钮 -->
            <a-button type="text" class="operate-btn del" v-if="form.flowList.length != 1" @click="handleDelete(index)">
              <a-space size="mini"><icon-minus-circle />删除 </a-space></a-button
            >
            <a-button
              type="text"
              class="operate-btn new"
              @click="handleAdd"
              v-if="index == form.flowList.length - 1 && index < MAX_COUNT - 1"
              ><a-space size="mini"><icon-plus-circle />新增</a-space></a-button
            >
          </div>
          <div class="error_text" v-if="item.post == undefined">请选择</div>
        </a-timeline-item>
      </a-timeline>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'

  const props = defineProps({
    settings: {
      type: Object,
    },
    sysDict: Object,
  })
  // 最大层数
  const MAX_COUNT = 5
  const NUM_TEXT = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']

  // 新增
  const handleAdd = () => {
    form.value.flowList.push({
      id: undefined,
      post: undefined,
    })
  }
  // 删除当前
  const handleDelete = (index) => {
    form.value.flowList.splice(index, 1)
  }

  const form = ref({})
  onMounted(() => {
    form.value = { ...props.settings }
  })

  defineExpose({
    form,
  })
</script>

<style lang="less" scoped>
  .setting-view {
    position: relative;
    .radio-wrap {
      margin-bottom: 10px;
      .title {
        font-weight: 400;
        font-size: 14px;
        color: #1d2129;
        line-height: 22px;
        margin-bottom: 8px;
      }
    }

    .form-wrap {
      width: 100%;
      background: #f7f8fa;
      border-radius: 4px;
      padding: 20px;

      .step-wrap {
        font-weight: 400;
        font-size: 14px;
        color: #1d2129;
        line-height: 22px;
        .required {
          font-weight: 400;
          font-size: 20px;
          color: #f53f3f;
          vertical-align: -5px;
        }
      }

      .select-wrap {
        margin-top: 3px;
        display: flex;
        align-content: center;
      }

      .error_text {
        font-size: 12px;
        color: #f76964;
        line-height: 17px;
      }
    }
  }

  .operate-btn {
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    user-select: none;
    padding: 0 12px;
    icon {
      margin-right: 8px;
    }
    &.del {
      color: #ea0000;
    }
    &.new {
      color: #165dff;
    }
  }
</style>
